<template>
  <div class="pager" v-if="total>1">
    <router-link class="prev" to="heaven"><i class="icon-prev"></i>Prev</router-link>
    <div class="pagination-number">
      <router-link class="btn" :key="key" v-for="(val,key) of to" :to="val" active-class="current">{{key+1}}</router-link>
    </div>
    <router-link class="next" to="heaven">Next<i class="icon-next"></i></router-link>
  </div>
</template>

<script>
  export default {
    name: "Pagination",
    props: {
      limit: {
        type: Number
      },
      total: {
        type: Number,
      },
      to: {
        type: Array
      }
    },

  }
</script>

<style scoped lang="scss">
  @import "~@/assets/scss/iconfont";

  .pager {
    border-top: 1px solid #dbdbdb;
    text-align: center;

    > a {
      transition: color .2s;
      display: inline-block;
      vertical-align: top;
      font: 500 16px/80px "Futura";
      color: #202020;
      letter-spacing: .02em;

      &:hover {
        color: $primary;

        &.prev {
          i {
            transform: translateX(-4px)
          }
        }

        &.next {
          i {
            transform: translateX(4px)
          }
        }
      }

      i {
        display: inline-block;
        vertical-align: top;
        font-size: 24px;
        line-height: 80px;
        color: #2537B5;
        transition: all 0.3s;
      }

      &.prev {
        i {
          margin-right: 10px;
        }
      }

      &.next {
        i {
          margin-left: 10px;
        }
      }
    }

    .pagination-number {
      display: inline-block;
      vertical-align: top;
      margin: 0 30px;
      border: solid #dbdbdb;
      border-width: 0 1px;
      padding: 20px 40px;

      a {
        display: inline-block;
        vertical-align: top;
        font: 300 16px/40px "Futura";
        margin: 0 1em;
        color: #202020;

        &.current {
          color: $primary;
          text-decoration: underline;
        }
      }
    }
  }
</style>
